<!DOCTYPE html>
<html>
<head>
<title>控制台</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../resources/css/styles.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<link href="../resources/css/datagrid.css" rel="stylesheet">
<script
	src="http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="../resources/component/template.min.js"></script>
<script type="text/javascript" src="../resources/component/jquery.js"></script>
<script type="text/javascript" src="external/jquery-ui.js"></script>
<script type="text/javascript" src="external/jquery.layout-latest.js"></script>
<script type="text/javascript"
	src="../resources/component/jquery.dataset.js"></script>
<script type="text/javascript" src="external/common.js"></script>
<script type="text/javascript"
	src="../resources/component/jquery.datagrid.js"></script>
<script type="text/javascript"
	src="../resources/component/jquery.datatree.js"></script>
<script type="text/javascript"
	src="../resources/component/jquery.dropdown.js"></script>
<script type="text/javascript">
	var outlayout, middlelayout;
	$(document).ready(function() {
		outlayout = $('body').layout({
			center__paneSelector : ".ui-layout-center",
			north__paneSelector : ".ui-layout-north"
			//	,	north__size:			48 
			,
			west__size : 240,
			spacing_open : 3 // ALL panes
			,
			spacing_closed : 3
		// ALL panes
		});
		middlelayout = $('div.ui-layout-center').layout({
			center__paneSelector : ".middle-center",
			east__paneSelector : ".middle-east",
			south__size : 38,
			spacing_open : 3 // ALL panes
			,
			spacing_closed : 3
		// ALL panes

		});
	});
</script>
</head>
<body>
	<ul id="sqloptions" class="dropdowndiv hide option-list">
		<li>
			<button class="clearbtn" id="sqloptions_close">x</button>
			<label>选项</label>
		</li>
		<li><label><input type="checkbox" /> 游标</label></li>
		<li><label><input type="checkbox" /> 全部缓存</label></li>
		<li><label><input type="checkbox" /> 单条缓存</label></li>
	</ul>
	<form name="console" method="post">
		<div class="ui-layout-center">
			Center
			<DIV class="ui-layout-south gradient">
				<div class="inputs">
					<!-- 
					<div class="input-cell input-cell5">
						<label>User:</label>
						<div>
							<input type="text" name="user" />
						</div>
					</div>
					<div class="input-cell input-cell5">
						<label>Pass:</label>
						<div>
							<input type="text" name="pass" />
						</div>
					</div> -->
					<div style="position: absolute; left: 300px;">
						<button class="btn" class="btn" type="button" id="save">新增保存</button>
						<button class="btn" class="btn" type="button" id="modify">修改保存</button>
					</div>
				</div>
			</div>
			<div class="middle-center">
				<div class="inputs">
					<div class="input-cell">
						<label>业务编号：</label>
						<div>
							<input type="text" name="sqlid" />
						</div>
					</div>
					<div class="input-cell">
						<label>业务名称：</label>
						<div>
							<input type="text" name="sqlname" />
						</div>
					</div>
					<div class="input-cell">
						<label>主表名称：</label>
						<div>
							<input type="text" name="tablename" />
						</div>
					</div>
					<div class="input-cell">
						<label>选项：</label>
						<div>
							<input type="hidden" readonly="readonly" name="sql_options" /> <input
								type="text" readonly="readonly" name="sql_options_text" />
						</div>
					</div>
					<div class="input-cell">
						<label>唯一属性：</label>
						<div>
							<input type="text" name="keyfield" />
						</div>
					</div>
					<div class="input-cell">
						<label>分组：</label>
						<div>
							<input id="grouptree" placeholder="请选择..." type="text"
								readonly="readonly"><button type="button" class="clearbtn">x</button>
						</div>
					</div>
				</div>
				<div id="tabs"
					style="position: absolute; top: 5em; left: 0; right: 0; bottom: 0">
					<ul>
						<li><a href="#tab1">列表查询</a></li>
						<li><a href="#tab2">新增</a></li>
						<li><a href="#tab3">更新</a></li>
						<li><a href="#tab4">删除</a></li>
						<li><a href="#tab5">元数据</a></li>
						<li><a href="#tab6">单条查询</a></li>
					</ul>
					<div id="tab1" class="tabs">
						<iframe name="queryIframe" frameborder="0" data-src="query.html"></iframe>
					</div>
					<div id="tab2" class="tabs">
						<iframe name="insertIframe" frameborder="0" data-src="insert.html"></iframe>
					</div>
					<div id="tab3" class="tabs">
						<iframe name="updateIframe" frameborder="0" data-src="update.html"></iframe>
					</div>
					<div id="tab4" class="tabs">
						<iframe name="deleteIframe" frameborder="0" data-src="delete.html"></iframe>
					</div>
					<div id="tab5" class="tabs">
						<iframe name="metadataIframe" frameborder="0"
							data-src="metadata.html"></iframe>
					</div>
					<div id="tab6" class="tabs">
						<iframe name="keycacheIframe" frameborder="0"
							data-src="singlequery.html"></iframe>
					</div>
				</div>
			</div>
			<div class="middle-east">
				<div class="datagrid" id="datatypeGrid" style="height: 100%">
					<table>
						<thead>
							<tr style="height: 10px;">
								<th>类型编号</th>
								<th>类型名称</th>
							</tr>
						</thead>
						<tbody></tbody>
						<tfoot></tfoot>
					</table>
				</div>
			</DIV>
		</div>
	</form>
	<!--  <DIV class="ui-layout-north">North</DIV>-->
	<DIV class="ui-layout-west">
		<div>
			<h2 class="gradient">业务列表</h2>
			<div class="inputs txt-c">
				<input id="querygrouptree" placeholder="请选择..." type="text"
					readonly="readonly"><button type="button" class="clearbtn">x</button>
				<button type="button" class="btn" id="Query">查询</button>
			</div>
		</div>
		<div class="datagrid" id="sqldefineGrid"
			style="position: absolute; left: 0; right: 0; top: 60px; bottom: 0;">
			<table>
				<thead>
					<tr style="height: 10px;">
						<th>业务编号</th>
						<th>业务名称</th>
					</tr>
				</thead>
				<tbody></tbody>
				<tfoot></tfoot>
			</table>
		</div>
	</DIV>
</BODY>

<script>
	$(function() {
		$("#tabs").tabs({
			activate : function(event, ui) {
				var $panel = ui.newPanel.find("iframe")
				!$panel.attr("src") && $panel.attr("src", $panel.data("src"));
			}
		});
		setSQLOptions(0);
	});
	var sqldefinedata = {
		sqlid : "1000",
		key : "oid",
		pageNo : 0,
		params : {},
		columns : [ {
			field : "sqlid",
			cls : "txt-l"
		}, {
			field : "sqlname",
			cls : "txt-l"
		} ]
	};
	var sqldefineGrid = $("#sqldefineGrid").DataGrid(sqldefinedata);
	/**
	 * datatype
	 */
	var dataTypedata = {
		sqlid : "1002",
		pageNo : 0,
		params : {},
		columns : [ {
			field : "typevalue",
			cls : "txt-l"
		}, {
			field : "typelabel",
			cls : "txt-l"
		} ]
	};
	var datatypeGrid = $("#datatypeGrid").DataGrid(dataTypedata);
	sqldefineGrid.on("update", function(event, datas, metadatas, aggrs,
			response) {
		sqldefineGrid.open();
		alert("操作成功");
	});
	datatypeGrid.open();
	datatypeGrid.on("load", function(event, datas, metadatas, aggrs) {
		$("[name='queryIframe']").attr("src", "query.html");
		datatypeGrid.off("load");
	});
	/**
	 * 分组数据
	 */
	var querygroupJson = {
		sqlid : "1001",
		key : "oid",
		pageNo : 0,
		parentKey : "pid",
		rootId : "",
		handlePosition : 0,
		multiSelect : false,
		nameKey : "groupname",
		columns : [ {
			field : "groupname",
			cls : "txt-l",
			edit : {
				type : "text"
			}
		} ]
	};
	var querygrouptree = $("#querygrouptree").DropTree(querygroupJson);
	querygrouptree.open();
	/**
	 * 分组数据
	 */
	var groupJson = {
		sqlid : "1001",
		key : "oid",
		pageNo : 0,
		parentKey : "pid",
		rootId : "",
		handlePosition : 0,
		multiSelect : false,
		nameKey : "groupname",
		columns : [ {
			field : "groupname",
			cls : "txt-l",
			edit : {
				type : "text"
			}
		} ]
	};
	var grouptree = $("#grouptree").DropTree(groupJson);
	grouptree.open();

	$("#Query").on("click", function() {
		var record = $("#querygrouptree").data("record");
		sqldefineGrid.dataset.params = {
			pid : record != null ? record.oid : ""
		};
		sqldefineGrid.open();
	});

	function getParamJson(target) {
		//var sqlid,sqlname,tablename,sql_options,kefield,user,pass,mid;
		target.sqlid = $("[name='sqlid']").val();
		target.sqlname = $("[name='sqlname']").val();
		target.tablename = $("[name='tablename']").val();
		target.sql_options = $("[name='sql_options']").val();
		target.keyfield = $("[name='keyfield']").val();
		//target.user = $("[name='user']").val();
		//target.pass = $("[name='pass']").val();
		var record = $("#grouptree").data("record");
		target.pid = record != null ? record.oid : "";

		$('iframe').each(function(index) {
			var $iframe = $(this)[0].contentWindow;
			if ($iframe.getParamsJson) {
				var getParamsData = $iframe.getParamsJson();
				$.extend(target, getParamsData);
			}
		});
		return target;
	}
	function getMetaBefore() {
		var target = sqldefineGrid.getActive();
		if (target != null) {
			return getParamJson(target);
		} else {
			var localtarget = {};
			return getParamJson(localtarget);
		}
	}

	function submitbefore(target) {

		if (target.sqlid == '') {
			alert("请填写SQLID");
			return false;
		}
		if (target.sqlname == '') {
			alert("请填写SQLNAME");
			return false;
		}
		if (target.pid == '') {
			alert("请选择分组");
			return false;
		}
		return true;
	}
	/**
	 * 获取子iframe
	 */
	$("#save").click(function() {
		var target = {
			def_select_params : "[]",
			def_select_metadata : "[]",
			def_insert_params : "[]",
			def_delete_params : "[]",
			def_update_params : "[]",
			def_singleselect_params : "[]"
		};
		target = getParamJson(target);
		if (submitbefore(target)) {
			sqldefineGrid.dataset.addRecord(target);
			sqldefineGrid.dataset.save();
		}
	});
	$("#modify").click(function() {
		var target = sqldefineGrid.getActive();
		if (target != null) {
			target = getParamJson(target);
			if (submitbefore(target)) {
				sqldefineGrid.dataset.modifyRecord(target);
				sqldefineGrid.dataset.save();
			}
		} else {
			alert("请选择修改数据");
		}
	});
	//事件绑定
	sqldefineGrid.on("click", "tbody tr", function() {
		var obj = sqldefineGrid.getActive();
		$("[name='sqlid']").val(obj.sqlid);
		$("[name='sqlname']").val(obj.sqlname);
		$("[name='tablename']").val(obj.tablename);
		setSQLOptions(obj.sql_options);
		$("[name='keyfield']").val(obj.keyfield);
		$("[name='user']").val(obj.user);
		grouptree.setValue(obj.pid);

		//获取Iframe

		$('iframe').each(function(index) {
			var $iframe = $(this)[0].contentWindow;
			if ($iframe.push) {
				$iframe.push(obj);
			}
		});
	});

	function push(iframe) {
		var data = sqldefineGrid.getActive();
		iframe.contentWindow.push(data);
	}
	function parse(sqldefine, sqlexe, datagrid) {
		var sqldefine = {
			sqldefine : sqldefine,
			m : "queryparams",
			s : "JSON"
		};
		var url = baseURL;
		$.ajax({
			url : url,
			type : "GET",
			dataType : "jsonp",
			cache : false,
			data : {
				allparams : JSON.stringify(sqldefine)
			},
			success : function(data) {
				console.log(data);
				if (data.outresult === 'success') {
					sqlexe.val(data.datas.sql);
					datagrid.dataset.setDatas(data.datas.arguments, [], {
						recordcount : 0
					});

				} else if (data.outresult === 'error') {
					console.error(data.outdesc);
				}
			},
			error : function(data) {
				console.error(arguments);
			}
		});
	}
	// sql_options下拉框
	function checkSqlOptions(checkall) {
		var $checkboxes = $sqloptions.find("input"), value = 0;
		if (checkall != null) {
			$checkboxes.prop("checked", checkall);
		}
		$checkboxes.each(function(i) {
			value += ($(this).prop("checked") ? 1 : 0) * Math.pow(2, i);
		});
		setSQLOptions(value);
	}
	var $sql_options_input = $("[name='sql_options']");
	var sqlOptionsDropdown = $("[name='sql_options_text']").DropDown({
		target : "#sqloptions",
		closeOnInnerAction : false
	});
	var $sqloptions = $("#sqloptions").on("change", "input[type='checkbox']",
			function(event) {
				checkSqlOptions();
			});
	$("#sqloptions_close").on("click", function() {
		sqlOptionsDropdown.hide();
	});
	// sql_options下拉框值初始化
	function setSQLOptions(value) {
		var value = parseInt(value) || 0, valueTexts = [];
		$("[name='sql_options']").val(value);
		$sqloptions.find("input").each(
				function(i) {
					var checked = value / Math.pow(2, i) % 2 >= 1;
					$(this).prop("checked", checked);
					valueTexts.push($.trim($(this).parent().text()) + ":"
							+ (checked ? "on" : "off"));
				});
		valueTexts = valueTexts.join("; ")
		$("[name='sql_options_text']").val(valueTexts)
				.attr("title", valueTexts);
	}
</script>
</html>